<template>
  <el-dialog title="报损原因" :visible.sync="dialogVisible" width="48%"   >
    <div class="LossesView">
      <div class="topBody">
        <div class="ListA">
          <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            label-width="84px"
            :inline="true"
          >
            <el-form-item label="责任工序" prop="id">
              <el-select
                v-model="queryParams.dutyProcessCode"
                placeholder="请选择"
                size="mini"
                @change="handlerSelect('dutyProcess', $event)"
              >
                <el-option
                  v-for="item in processFlow"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="发现工序" prop="id">
              <el-select
                v-model="queryParams.findProcessCode"
                placeholder="请选择"
                size="mini"
                @change="handlerSelect('findProcess', $event)"
              >
                <el-option
                  v-for="item in processFlow"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="返回工序" prop="id">
              <el-select
                v-model="queryParams.returnProcessCode"
                placeholder="请选择"
                size="mini"
                @change="handlerSelect('returnProcess', $event)"
              >
                <el-option
                  v-for="item in processFlow"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="报损类别" prop="id">
              <el-select
                v-model="queryParams.reportClassify"
                placeholder="请选择"
                size="mini"
              >
                <el-option
                  v-for="item in lossReason"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictLabel"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="ListB">
          <el-form :model="queryParams" ref="queryForm" label-width="84px">
            <el-form-item label="报损原因" prop="id">
              <el-input
                type="textarea"
                :rows="4"
                placeholder="请输入报损原因"
                v-model="queryParams.reportNote"
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-divider>报损列表</el-divider>
      <div class="bottomBody">
        <el-table :data="queryParams.assemblyGlassList" height="250px" border>
          <el-table-column label="编号" align="center" key="id" prop="id" />
          <el-table-column label="尺寸(宽*高)" align="center" width="120">
            <template slot-scope="scope">
              {{ scope.row.furInWidth + "*" + scope.row.furInHeight }}
            </template>
          </el-table-column>
          <el-table-column
            label="厚度"
            align="center"
            key="thick"
            prop="thick"
          />
          <el-table-column
            label="玻璃类型"
            align="center"
            key="type"
            prop="type"
            fit
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="客户"
            align="center"
            key="clientName"
            prop="clientName"
            fit
            show-overflow-tooltip
          />
          <el-table-column
            label="识别码"
            align="center"
            key="optCodeContext"
            fit
          >
            <template slot-scope="scope">
              <div class="optCodeContext">
                {{ scope.row.optGlass.barcode }},{{
                  scope.row.optGlass.disturbCode
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="位置"
            align="center"
            prop="place"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.quartz_common_location"
                :value="scope.row.place"
              />
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态" width="80" align="center">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.quartz_glass_state"
                :value="scope.row.state"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handelerConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { ReportLost, getReportLostInfo } from "@/api/assembly/cage";
export default {
  dicts: [
    "quartz_glass_state",
    "quartz_common_location_search",
    "quartz_common_location",
  ],
  data() {
    return {
      dialogVisible: false,
      lossReason: [],
      processFlow: [],
      queryParams: {
        assemblyGlassList: [],
        returnProcessCode:null
      },
      parentEvent: null,
    };
  },
  methods: {
    showDialog(glassData, event) {
      // 初始化值
      this.queryParams = {
        assemblyGlassList: [],
      };
      this.queryParams.assemblyGlassList = glassData;
      this.parentEvent = event;
      this.initData();
      this.dialogVisible = true;
    },
    initData() {
      getReportLostInfo().then((res) => {
        this.lossReason = res.data.damageReasons;

        this.processFlow = res.data.process_flow;
        this.queryParams.returnProcessCode = res.data.process_flow[0].dictValue
      });
    },
    handelerConfirm() {
      this.queryParams.rePortUserId = sessionStorage.getItem("account");
      this.$prompt("请输入密码", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^5563$/,
        inputErrorMessage: "密码错误",
        inputType: "password",
      })
        .then(({ value }) => {
          ReportLost(this.queryParams).then((res) => {
            this.$message.success(res.msg || "报损成功");
            this.parentEvent();
            this.dialogVisible = false;
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    handlerSelect(key, event) {
      this.processFlow.forEach((item) => {
        if (item.dictValue == event) {
          this.queryParams[key] = item.dictLabel;
        }
      });
    },
  },
  computed: {},
};
</script>

<style lang="less" scoped>
/deep/ .el-table {
  .cell {
    padding: 0 !important;
    font-size: 14px;
  }
}
/deep/ .el-dialog__body {
  padding: 10px;
}
.LossesView {
  width: 100%;
  height: 500px;
  .topBody {
    height: 200px;
    width: 100%;
    .ListA {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }
    .ListB {
      width: 96%;
    }
  }
}
</style>
